import React from "react"
import Link from "next/link"
import Image from "next/image"
import { Zap } from "lucide-react"

/**
 * 首页底部
 */
const HomeFooter = () => {
  return (
    <footer className="bg-gray-900 text-gray-400 py-12">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <div className="flex items-center space-x-3 mb-4">
              <div className="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg">
                <Zap className="text-white w-6 h-6" />
              </div>
              <h3 className="text-xl font-bold text-white">Flow Forge</h3>
            </div>
            <p className="mb-4 text-white">下一代 AI 工作流编排平台，帮助企业快速构建和部署人工智能应用。</p>
            <p className="text-white">© 2025 Flow Forge. 保留所有权利。</p>
          </div>

          <div>
            <h4 className="text-lg font-semibold text-white mb-4">产品</h4>
            <ul className="space-y-2">
              <li>
                <Link href="#" className="hover:text-white transition-colors">
                  功能
                </Link>
              </li>
              <li>
                <Link href="#" className="hover:text-white transition-colors">
                  定价
                </Link>
              </li>
              <li>
                <Link href="#" className="hover:text-white transition-colors">
                  文档
                </Link>
              </li>
              <li>
                <Link href="#" className="hover:text-white transition-colors">
                  API
                </Link>
              </li>
            </ul>
          </div>

          <div>
            <h4 className="text-lg font-semibold text-white mb-4">公司</h4>
            <ul className="space-y-2">
              <li>
                <Link href="#" className="hover:text-white transition-colors">
                  关于我们
                </Link>
              </li>
              <li>
                <Link href="#" className="hover:text-white transition-colors">
                  博客
                </Link>
              </li>
              <li>
                <Link href="#" className="hover:text-white transition-colors">
                  招聘
                </Link>
              </li>
              <li>
                <Link href="#" className="hover:text-white transition-colors">
                  联系我们
                </Link>
              </li>
            </ul>
          </div>

          <div>
            <h4 className="text-lg font-semibold text-white mb-4">支持</h4>
            <ul className="space-y-2">
              <li>
                <Link href="#" className="hover:text-white transition-colors">
                  帮助中心
                </Link>
              </li>
              <li>
                <Link href="#" className="hover:text-white transition-colors">
                  社区
                </Link>
              </li>
              <li>
                <Link href="#" className="hover:text-white transition-colors">
                  状态
                </Link>
              </li>
              <li>
                <Link href="#" className="hover:text-white transition-colors">
                  隐私政策
                </Link>
              </li>
            </ul>
          </div>
        </div>

        <div className="flex justify-end gap-3 border-t border-gray-800 mt-12 pt-8 text-center">
          <Link
            href="/"
            target="_blank"
            rel="noopener noreferrer"
            className="text-gray-400 hover:text-white transition-colors duration-300 transform"
            aria-label="GitHub"
          >
            <Image src="/images/github.svg" alt="GitHub" width="32" height="32" />
          </Link>
          <Link
            href="/"
            target="_blank"
            rel="noopener noreferrer"
            className="text-gray-400 hover:text-white transition-colors duration-300 transform"
            aria-label="Facebook"
          >
            <Image src="/images/facebook.svg" alt="Facebook" width="32" height="32" />
          </Link>
          <Link
            href="/"
            target="_blank"
            rel="noopener noreferrer"
            className="text-gray-400 hover:text-white transition-colors duration-300 transform"
            aria-label="Youtube"
          >
            <Image src="/images/youtube.svg" alt="Youtube" width="32" height="32" />
          </Link>
          <Link
            href="/"
            target="_blank"
            rel="noopener noreferrer"
            className="text-gray-400 hover:text-white transition-colors duration-300 transform"
            aria-label="Twitter"
          >
            <Image src="/images/twitter.svg" alt="Twitter" width="32" height="32" />
          </Link>
        </div>
      </div>
    </footer>
  )
}

export default HomeFooter
